<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>instrument-add</title>
    <link rel="stylesheet" href="__PUBLIC__/css/layui.css">
    <script type="text/javascript" src="__PUBLIC__/js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/layui.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/element.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/vue.js"></script>
    <script type="text/javascript" src="__PUBLIC__/js/xlsx.core.min.js"></script>
</head>
<style>
    .num{
        font-size:18px;
        color:red;
        font-weight: bold;

    }
</style>
<body>
    <fieldset class="table-search-fieldset" style="margin-top:36px">
        <legend>請上传新设备记录所在的excel文件</legend>
    <div id="app" style="margin: 10px 10px 10px 10px">
        
        <button class="layui-btn " style='width:145px'><input style='width:70%' type='file' id='file' title='upload file' @click='upload'  /></button>
        <span>目前上传的excel中含有<input type="button" v-model='count' class='num' id='bt1'>条仪器设备记录</span>
        <!-- <span id='span1'></span> -->
        
    </div>
</fieldset>
</body>
<script>
    let rdata = [];
   
   
    let vm = new Vue({
        el:'#app',
        data:{
            count:0,
        },
        watch:{
            'count':function(newval){
                console.log(newval)
            }
        },
        methods:{
            upload(){
                document.getElementById('file').addEventListener('change', function(e) {
                var files = e.target.files;
                //console.log(files)
                if(files.length == 0) return;
                var f = files[0];
                console.log(f)
                if(!/\.xlsx$/g.test(f.name)&&!/\.xls$/g.test(f.name)) {
                    alert('仅支持读取xls或者xlsx格式！');
                    return;
                }
                readWorkbookFromLocalFile(f, function(workbook) {
                    //读取日期格式可能会出现日期格式的问题，解决方案：在日期前面加个空格，设置单元格格式为常规即可！！！
                    //之后代码处理去掉前后空格即可！！
                    let data = readWorkbook(workbook);
                    
                   
                    this.count = data.length;
                    let a = document.getElementById('bt1');
                    a.value = this.count;
                    a.dispatchEvent(new Event('input'))
                    rdata = data
                });
                
                });
            }
        }
    })


    // 读取本地excel文件
    function readWorkbookFromLocalFile(file, callback) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, {type: 'binary'});
            if(callback) callback(workbook);
        };
        reader.readAsBinaryString(file);
        }
    function readWorkbook(workbook) {

            var sheetNames = workbook.SheetNames; // 工作表名称集合
            console.log(sheetNames);
            var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
            console.log(worksheet);
            var csv = XLSX.utils.sheet_to_json(worksheet);//sheet_to_json/csv 转换成json或者csv，还可以是txt，html等其他格式！！！
            //console.log(csv);
            return csv;

        
        }

    
            

    // $(document).ready(function(){
    //     let list = {};
    //     layui.use(['element','form','layer'],function(){
    //         let element = layui.element;
    //         element.init();
    //         let form = layui.form;
    //         let layer = layui.layer;
    //         form.on('submit(data-search-btn)',function(data){
    //             //console.log( typeof data.field);
    //             // for (x in data.field){
                   
    //             // }
               
    //            rdata = data.field;
    //            return false;
    //         })
    //     })
    // })
    function callbackdata(){

        return rdata;
    }

</script>
</html>